import React, { Component } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom';
import { actionCreator } from './store'
import {
  DetailWrapper,
  Header,
  Content
} from './style'

class Detail extends Component {
  render() {
    console.log(this.props)
    return (
      <DetailWrapper>
        <Header>{this.props.title}</Header>
        <Content 
          dangerouslySetInnerHTML={{__html: this.props.content}} 
        />
      </DetailWrapper>
    )
  }
  componentDidMount() {
    this.props.getDetailData(this.props.match.params.id)
  }
}

const mapState = (state) => ({
  title: state.getIn(['detail', 'title']),
  content: state.getIn(['detail', 'content'])
})

const mapDispatch = (dispatch) => ({
  getDetailData(id) {
    dispatch(actionCreator.getDetailAction(id))
  }
})

export default connect(mapState, mapDispatch)(withRouter(Detail))